<template>
    <div>
        <el-dialog @close="closeFn" v-model="visibles" width="45%" :show-close="true">
            <div class="prop" style="max-height:60vh;overflow-y:auto;">
                <div class="head">{{ item.en_title }}</div>
                <!-- 时间 -->
                <div class="time">{{ item.article_time }}</div>
                <div class="count">
                    <div class="neiRong" v-html="item.en_content"></div>
                </div>
                <div class="head">{{ item.zh_title }}</div>
                <!-- 时间 -->
                <div class="time">{{ item.article_time }}</div>
                <div class="count">
                    <div class="neiRong" v-html="item.zh_content"></div>
                </div>
            </div>

            <!-- 这个是左右箭头 -->
            <div class="arrow f f-a-c f-j-b">
                <img src="/src/status/jiantou/zuo.png" @click="zuobian" class="zuoImg" alt="">
                <!-- <div class="cent f f-a-c">
                    <div class="caijiImgs f f-a-c f-j-c"><img src="/src/status/jiantou/dk.png" class="dk" alt="">采集
                    </div>
                    <div class="caijiImg f f-a-c f-j-c"><img src="/src/status/jiantou/zidian.png" class="dk" alt="">采集
                    </div>
                </div> -->
                <img src="/src/status/jiantou/you.png" class="zuoImg" @click="youbian" alt="">
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import second from ''
let visibles = ref(false)
let count = ref('飞机从稻城亚丁机场起飞，舷窗外地飞机从稻城亚丁机场起飞，舷窗外地面隐现一个小圆点。这个被群山环绕的小圆点，事实上是个大家伙，当地人称之为“千眼天珠”。它的名字叫作圆环阵太阳射电成像望远镜（以下简称“圆环阵”），位于海拔3820米的四川省甘孜州稻城县，是目前全球规模最大的综合孔径射电望远镜，也是国家重大科技基础设施“空间环境地基综合监测网”（子午工程二期）的标志性设备之一。“圆环阵不仅能监测太阳的各种爆发活动，还能监测太阳风暴进入行星际的过程，对理解太阳爆发机制和日地传播规律，预测太阳活动对地球的影响具有重要作用。”圆环阵项目负责人、中国科学院国家空间科学中心研究员阎敬业告诉科技日报记者。国庆节前，圆环阵顺利通过工艺测试，宣告正式建成。测试表明，圆环阵实现了最大视场达10个太阳半径的连续稳定太阳射电成像与频谱观测能力，各项技术指标达到或优于设计指标要求。313台天线组成“射电相机”作为离地球最近的恒星，太阳为我们带来光和热。但它也是地球空间天气事件的源头，太阳打个“喷嚏”，地球可能会“感冒”。“别小看这个‘喷嚏’，强烈的太阳爆发释放出的能量，相当于100亿颗百万吨级核弹。”阎敬业说，一旦能量冲向地球，会对空间和地面的高技术系统造成严重影响，大面积损毁电网，威胁高铁、卫星等运行安全，影响导航精度、雷达性能，造成短波通信中断等。“千眼天珠”的价值就在于此。它如同一部“射电相机”，对着太阳拍照，对空间天气进行预报和预警，为科学研究提供第一手资料。眼前这个巨大的圆环阵，由313台直径6米的白色反射面天线组成，天线均匀分布在直径1公里的圆环上，圆环中心有一座约百米高的中心定标塔。每天太阳升起前，313台天线同时对准中心定标塔进行对焦校准。太阳升起后，它们就像向日葵一样对准太阳，随太阳转动。太阳落山后，圆环阵也不“下班”，开始其他观测任务，如探测空间碎片、脉冲星和静止轨道卫星等。由于太阳的射电特征是快速变化的，普通的单口径射电望远镜逐点扫描已不适用，需要一个射电频段的“镜头”对太阳拍照。面隐现一个小圆点。这个被群山环绕的小圆点，事实上是个大家伙，当地人称之为“千眼天珠”。它的名字叫作圆环阵太阳射电成像望远镜（以下简称“圆环阵”），位于海拔3820米的四川省甘孜州稻城县，是目前全球规模最大的综合孔径射电望远镜，也是国家重大科技基础设施“空间环境地基综合监测网”（子午工程二期）的标志性设备之一。“圆环阵不仅能监测太阳的各种爆发活动，还能监测太阳风暴进入行星际的过程，对理解太阳爆发机制和日地传播规律，预测太阳活动对地球的影响具有重要作用。”圆环阵项目负责人、中国科学院国家空间科学中心研究员阎敬业告诉科技日报记者。国庆节前，圆环阵顺利通过工艺测试，宣告正式建成。测试表明，圆环阵实现了最大视场达10个太阳半径的连续稳定太阳射电成像与频谱观测能力，各项技术指标达到或优于设计指标要求。313台天线组成“射电相机”作为离地球最近的恒星，太阳为我们带来光和热。但它也是地球空间天气事件的源头，太阳打个“喷嚏”，地球可能会“感冒”。“别小看这个‘喷嚏’，强烈的太阳爆发释放出的能量，相当于100亿颗百万吨级核弹。”阎敬业说，一旦能量冲向地球，会对空间和地面的高技术系统造成严重影响，大面积损毁电网，威胁高铁、卫星等运行安全，影响导航精度、雷达性能，造成短波通信中断等。“千眼天珠”的价值就在于此。它如同一部“射电相机”，对着太阳拍照，对空间天气进行预报和预警，为科学研究提供第一手资料。眼前这个巨大的圆环阵，由313台直径6米的白色反射面天线组成，天线均匀分布在直径1公里的圆环上，圆环中心有一座约百米高的中心定标塔。每天太阳升起前，313台天线同时对准中心定标塔进行对焦校准。太阳升起后，它们就像向日葵一样对准太阳，随太阳转动。太阳落山后，圆环阵也不“下班”，开始其他观测任务，如探测空间碎片、脉冲星和静止轨道卫星等。由于太阳的射电特征是快速变化的，普通的单口径射电望远镜逐点扫描已不适用，需要一个射电频段的“镜头”对太阳拍照。')
const emit = defineEmits(['zuobian', 'youbian'])
// 组件传值
const props = defineProps({
    item: {
        default: {},
        type: Object,
    },

});
// 点击右上面叉号
const closeFn = () => {
    visibles.value = false
}
// 点击左下面箭头
const zuobian = () => {
    if (!props.item.pre_article_id) {
        return ElMessage('已经到头了~')
    }
    console.log(props.item, '00000000');
    emit('zuoFerter', props.item.pre_article_id)
}
// 点击右下面箭头
const youbian = () => {
    if (!props.item.next_article_id) {
        return ElMessage('已经到头了~')
    }
    console.log(props.item, '00000000');
    emit('youFerter', props.item.next_article_id)
}

// 暴露
defineExpose({
    visibles
});
</script>

<style lang="scss" scoped>
@function pxfn($px) {
    @return calc($px / 18.4) * 1vw;
}

.arrow {
    margin-top: pxfn(0);

    .zuoImg {
        width: pxfn(44);
        height: pxfn(44);
    }
}

// .prop::-webkit-scrollbar {
//     display: none;
// }

.caijiImg {
    width: pxfn(78);
    height: pxfn(36);
    background: #f7f8fa;
    border-radius: pxfn(8);
    font-size: pxfn(14);
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    color: #1d2129;
    margin-left: pxfn(15);
    cursor: pointer;

    .dk {
        width: pxfn(20) !important;
        height: pxfn(20) !important;
        margin-right: pxfn(6);
    }
}

.caijiImg:hover {
    background: #32bbea;
    color: #fff;
}

.caijiImgs {
    width: pxfn(78);
    height: pxfn(36);
    // background: #f7f8fa;
    border-radius: pxfn(8);
    font-size: pxfn(14);
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    color: #1d2129;
    cursor: pointer;

    .dk {
        width: pxfn(20) !important;
        height: pxfn(20) !important;
        margin-right: pxfn(6);
    }
}

.head {
    font-size: pxfn(22);
    font-family: PingFang SC, PingFang SC-600;
    font-weight: 600;
    text-align: left;
    color: #1d2129;
    margin-top: pxfn(15);
}

.count {
    // height: 60vh;
    // overflow-y: auto;

    // &::-webkit-scrollbar {
    //     // 隐藏滚动条将宽度设置为0
    //     background-color: #e8eaec;
    //     width: 0 !important;
    // }
}

.neiRong {
    font-size: pxfn(14);
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    // text-align: LEFT;
    color: #4e5769;
    line-height: 2;
}

.time {
    font-size: pxfn(14);
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    text-align: LEFT;
    color: #868d9c;
    margin: pxfn(15) 0;
}

::v-deep .el-dialog {
    border-radius: pxfn(15) !important;
    // max-height: 70vh;
    // overflow-y: auto;
}

::v-deep .el-dialog__headerbtn {
    font-size: pxfn(26) !important;
}

::v-deep .el-dialog__body {
    padding-top: pxfn(15);
    padding-bottom: pxfn(5);
}

::v-deep .el-dialog {
    --el-dialog-margin-top: 10vh;
}
</style>